<template>
    <div>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="6" >
                        <el-button-group style="width: 100%">
                            <el-button class="el-icon-plus" style="width: 50%" type="success"
                                       @click="formComponentVisble = true"> 添 加 </el-button>
                            <el-button class="el-icon-refresh" type="warning" style="width: 50%;"
                                       @click="reflash"> 刷 新 </el-button>
                        </el-button-group>
                    </el-col>
                    <el-col :span="18">
                        <div>
                            <el-input placeholder="请输入内容" v-model="searchText">
                                <el-select v-model="searchSelect" slot="prepend" style="width: 120px">
                                    <el-option label="商品名称" value="1"></el-option>
                                    <el-option label="商品编号" value="2"></el-option>
                                </el-select>
                                <el-button slot="append" icon="el-icon-search" @click="searchByConditional"></el-button>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="商品图片" width="250">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.path" fit="contain"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="coId" label="商品编号" width="200" align="center"></el-table-column>
                    <el-table-column prop="coName" label="商品名" width="250" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
                    <el-table-column prop="updateTime" label="最新修改时间" width="200" align="center"></el-table-column>
                    <el-table-column label="基本操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 15px">
                    <el-pagination
                            :hide-on-single-page="true"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="nowPage"
                            :page-size="pageSize"
                            layout="prev, pager, next, jumper"
                            :total="formTotal">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>

        <el-dialog title="新建商品" :visible.sync="formComponentVisble" width="30%">
            <Component v-bind:isAdd="true" v-bind:formComponentVisble="formComponentVisble"
                       v-on:watchingCloseVisble="waitingChange"></Component>
        </el-dialog>

    </div>
</template>

<script>
    import Component from './component'
    export default {
        name: "index",
        components:{
            Component
        },
        data(){
            return{
                // header中的搜索栏的内容
                searchText: '',
                // header中的搜索栏的选定内容
                searchSelect: '',
                // 新建与编辑的表单的显示标识符
                formComponentVisble: false,
                editComponentVisble: false,
                // 用于记录当前是第几页
                nowPage: 1,
                // 表格一页的数量
                pageSize: 0,
                // 表格内容的总数
                formTotal: 0,
                // 表单的内容
                tableData: [],
            }
        },
        methods:{
            // 监听新建与编辑操作对应的标识符监听
            waitingChange: function (status) {
                this.formComponentVisble = status;
                this.reflash(this.nowPage);
            },
            // 表格的刷新按钮
            reflash: function (nextPage) {
                let win = this;
                const fromData = new FormData;
                fromData.append("next-page", nextPage);
                this.$http.post("/api/commodity/obtain", fromData).then(function(response){
                    if(response.data !== null  && response.data !== ""){
                        win.tableData = response.data;
                        win.pageSize = response.data[0].pageMaxNum;
                        win.formTotal = response.data[0].count;
                    } else{
                        // 在查找失败后，重置查找的表单
                        win.errorRestore(win);

                    }
                });
            },
            // 根据条件找到表单的做法
            searchByConditional: function () {
                let win = this;
                const fromData = new FormData;
                if (this.searchSelect === "1"){
                    // 通过商品名字来查找
                    fromData.append("condition", this.searchText);
                    fromData.append("next-page", this.nowPage);
                    this.$http.post("/api/commodity/obtain/1", fromData).then(function(response){
                        if(response.data !== null  && response.data !== ""){
                            win.tableData = response.data;
                            win.pageSize = response.data[0].pageMaxNum;
                            win.formTotal = response.data[0].count;
                        } else{
                            // 在查找失败后，重置查找的表单
                            win.errorRestore(win);
                        }
                    });
                }else if (this.searchSelect === "2"){
                    // 通过商品ID来查找
                    fromData.append("condition", this.searchText);
                    fromData.append("next-page", this.nowPage);
                    this.$http.post("/api/commodity/obtain/2", fromData).then(function(response){
                        if(response.data !== null && response.data !== ""){
                            win.tableData = response.data;
                            win.pageSize = response.data[0].pageMaxNum;
                            win.formTotal = response.data[0].count;
                        } else{
                            // 在查找失败后，重置查找的表单
                            win.errorRestore(win);
                        }
                    });
                }

            },
            // pageSize 改变时会触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 	nowPage 改变时会触发
            handleCurrentChange(val) {
                this.reflash(this.nowPage);
            },
            // 查找错误跳转处理
            errorRestore(win){
                win.pageSize = 0;
                win.formTotal = 0;
                win.$message.error("未查找到相关元素");
                win.nowPage = 0;
                win.searchText = '';
            },
            // 表单中的删除按钮
            handleDelete(index, row) {
                let form = new FormData;
                // alert(index + " " + row.coId);
                form.append("id", row.coId);
                let win = this;
                this.$http.post("/api/commodity/delete", form).then(function(response){
                    if(response.data){
                        win.reflash(this.nowPage);
                        win.$message.success("删除成功");
                    } else{
                        // 在查找失败后，重置查找的表单
                        win.reflash(this.nowPage);
                        win.$message.error("删除失败");
                    }
                });
            }
        },
        mounted() {
            this.reflash(this.nowPage);
        }
    }
</script>

<style scoped>

</style>
